<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>创作中心</title>

    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
</head>
<body style="background-color: #f8f8f8;">

<div th:replace="~{commons::navbar('write')}"></div>


<div class="container">
    <div style="background: white;border-radius: 5px;box-shadow: 0 1px 3px rgba(18,18,18,.1);padding: 0px 10px 10px 10px">

        <div class="row">
            <main role="main" class="col-xs-12" style="padding: 10px 10px 10px 10px;">
                <div>
                    <div th:each="article:${articles}">
                        <div style="display: flex">
                        <span style="line-height: 39px;margin-right: 10px;color: #01a0e4"
                              class="glyphicon glyphicon-book"></span>
                            <a th:href="@{/detail(id=${article.getId()})}" style="text-decoration: none"><h4
                                    th:text="${article.getTitle()}"></h4></a>
                        </div>
                        <div style="color: #888888;display: flex">
                            <div>
                            <span style="margin-left: 10px">
                            <span style="color: #01a0e4"
                                  class="glyphicon glyphicon-time"></span>
                            <span th:text="${#dates.format(article.getDate(),'yyyy年MM月dd日 HH:mm:ss')}"> </span>
                        </span>
                                <span style="margin-left: 10px"> <span style="color: #01a0e4"
                                                                       class="glyphicon glyphicon-comment"></span> 评论<span>15</span></span>
                                <span style="margin-left: 10px"> <span style="color: #01a0e4"
                                                                       class="glyphicon glyphicon-star"></span> 收藏<span>15</span></span>
                                <span style="margin-left: 10px"> <span style="color: #01a0e4"
                                                                       class="glyphicon glyphicon-heart"></span> 点赞<span>15</span></span>
                            </div>
                            <div style="margin-left: 8em">
                                <a th:href="@{/user/addArticle(id=${article.getId()})}"
                                   style="background-color: white;border: #0084ff solid 1px;color: #0084ff" class="btn">编辑</a>
                                <a id="delete" onclick="javascript:return delete()"
                                   th:href="@{/user/deleteArticle(id=${article.getId()})}"
                                   style="background-color: white;border: #0084ff solid 1px;color: #0084ff" class="btn">删除</a>
                            </div>
                        </div>
                        <hr>
                    </div>

                </div>
            </main>
        </div>
        <!--上下页-->
        <div style="margin-top: 20px">
            <div style="text-align: center">
                <a th:href="@{/user/admin(id=${articlePage.current-1})}" th:if="${articlePage.current!=1}"
                   type="button"
                   class="btn" style="background-color: #0084ff;color: white">
                    <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> 上一页
                </a>
                <a th:href="@{/user/admin(id=${articlePage.current+1})}"
                   th:if="${articlePage.current!=articlePage.pages}"
                   type="button" class="btn" style="background-color: #0084ff;color: white">
                    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> 下一页
                </a>
            </div>
        </div>
        <br>
    </div>
</div>

</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script th:src="@{/js/bootstrap.js}"></script>
<script>
    window.onload = function () {
        var bt = document.getElementById("delete");
        bt.onclick = function () {
            if (confirm("真的要删除吗?")) {
                return true;
            } else {
                return false;
            }
        }
    }
</script>
</body>
</html>